<template>
  <el-container class="container">
    <el-header class="header">
        <div class="logo-container">
          今日好评
        </div>
        <el-menu background-color="#1d3548" text-color="#fff">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>{{username}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="onLogout">退出</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#bfcbd9"
          active-text-color="#fff">
          <template v-for="(item, index) in routes" v-if="!item.hidden && item.children">
            <router-link :key="index" :to="item.path" v-if="item.name">
              <el-menu-item  :index="index">
                <i class="el-icon-document"></i>
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </router-link>
            <template v-for="(child, subIndex) in item.children" v-if="(!child.hidden) && (child.roles && child.roles.includes(role))">
              <router-link :key="subIndex" :to="child.path">
                <el-menu-item  :index="subIndex.toString()">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{child.name}}</span>
                </el-menu-item>
              </router-link>
            </template>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { routes } from '@/router/index.js'
export default {
  data() {
    return {
      routes,
      username: JSON.parse(sessionStorage.getItem('user')).username,
      role: JSON.parse(sessionStorage.getItem('user')).role
    }
  },
  created() {
    this.checkAuth()
  },
  methods: {
    checkAuth() {
      if (!sessionStorage.getItem('token')) {
        this.$router.push('login')
      }
    },
    onLogout() {
      sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
}
.header {
  display: flex;
  justify-content: space-between;
  padding: 0 0 0 .2rem;
  color: #fff;
  background: #1d3548;
  & .logo-container {
    font-size: .32rem;
    line-height: .6rem;
  }
}
.el-menu {
  z-index: 1000;
  border-right: 0;
  & a {
    text-decoration: none;
  }
}
.el-submenu .el-menu-item {
  min-width: auto;
}
.el-menu {
  height: 100%;
}
</style>

